<template>
	<view>
		<view class="my-list" v-if="listData.length > 0">
			<view class="my-item" v-for="(item, index) in listData" :key="item.id" @click="bindDetail(item.id)">
				<view class="publish-xiajia" @click.stop="offCat(item.id)" v-if="isPublish">下架</view>
				<view class="my-item-left"><image :src="IMG_URL + item.img" mode="aspectFill"></image></view>
				<view class="my-item-right">
					<view class="my-item-title">
						<text>{{ item.type }}</text>
						<icon class="icon-sex" :class="{ 'icon-sex-mm': item.sex != 1 }"></icon>
					</view>
					<view class="my-item-address">
						<icon class="icon-address"></icon>
						<text>{{ item.city + item.district }}</text>
					</view>
					<view class="my-item-time">{{ item.birth }}</view>
				</view>
				<!-- 点赞评论数 -->
				<view class="my-item-lc" v-if="!isCollect">
					<view class="my-item-lc-gz">
						<icon class="icon-like"></icon>
						<text>{{ item.like }}</text>
					</view>
					<view class="my-item-lc-gz">
						<icon class="icon-comment"></icon>
						<text>{{ item.comment }}</text>
					</view>
				</view>
				<!-- 已收藏 -->
				<view class="collect-box" v-else>
					<icon class="icon-WDSC"></icon>
					<text>已收藏</text>
				</view>
			</view>
		</view>
		<!-- 没有数据 -->
		<view class="list-no-data" v-else>
			<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lits-nodata.png" mode="" class="no-data-img"></image>
			<text class="no-data-txt">暂无数据</text>
			<button class="no-data-btn" @click="goAdopt">去逛逛吧</button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MyList',
	props: {
		isCollect: {
			type: Boolean,
			default: false
		},
		listData: {
			type: Array,
			default: []
		},
		isPublish: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			IMG_URL: 'https://nabercat.oss-cn-hangzhou.aliyuncs.com/'
		};
	},
	methods: {
		// 去逛逛
		goAdopt: function() {
			uni.switchTab({
				url: '/pages/adopt/adopt'
			});
		},

		// 商品详情
		bindDetail: function(id) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${id}`
			});
		},

		// 下架
		offCat(id) {
			this.$emit('offCat', id);
		}
	}
};
</script>

<style scoped lang="scss">
.my-list {
	padding: 20rpx;
}

.my-item {
	width: 100%;
	height: 252rpx;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 28rpx 32rpx 36rpx;
	box-sizing: border-box;
	display: flex;
	position: relative;
	.publish-xiajia {
		position: absolute;
		right: 20rpx;
		top: 30rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(252, 95, 95, 0.08);
		color: #fc8f8f;
		border-radius: 40rpx;
		text-align: center;
		line-height: 50rpx;
	}
}

.my-item-left {
	width: 188rpx;
	height: 188rpx;
	margin-right: 32rpx;
}

.my-item-left image {
	width: 188rpx;
	height: 188rpx;
	border-radius: 10rpx;
}

.my-item-right {
	flex: 1;
	padding-top: 8rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.my-item-right .my-item-title {
	display: flex;
	align-items: center;
	color: #333333;
	font-size: 32rpx;
	font-weight: 600;
}

.my-item-right .my-item-title > text {
	max-width: 350rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.my-item-right .my-item-title > .icon-sex {
	width: 28rpx;
	height: 28rpx;
	background: url(../../../static/image/sex-gg.png) no-repeat;
	background-size: cover;
	margin-left: 10rpx;
}

.my-item-right .my-item-title > .icon-sex-mm {
	background: url(../../../static/image/sex-mm.png) no-repeat;
	background-size: cover;
}

.my-item-right .my-item-address {
	display: flex;
	align-items: center;
	color: #666666;
	font-size: 22rpx;
	margin-bottom: 30rpx;
}

.my-item-right .my-item-address .icon-address {
	width: 20rpx;
	height: 26rpx;
	background: url(../../../static/image/icon-i-address.png) no-repeat;
	background-size: cover;
	margin-right: 10rpx;
}

.my-item-right .my-item-address > text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.my-item-right .my-item-time {
	width: 118rpx;
	height: 28rpx;
	background: rgba(252, 95, 95, 0.08);
	border-radius: 17rpx;
	text-align: center;
	line-height: 28rpx;
	color: #fc8f8f;
	font-size: 18rpx;
}

.my-item-lc {
	display: flex;
	position: absolute;
	bottom: 36rpx;
	right: 36rpx;
}

.my-item-lc .my-item-lc-gz {
	display: flex;
	align-items: center;
	margin-left: 72rpx;
	color: #666666;
	font-size: 20rpx;
}

.my-item-lc .my-item-lc-gz > icon {
	width: 30rpx;
	height: 30rpx;
	margin-right: 8rpx;
}

.my-item-lc .my-item-lc-gz .icon-like {
	background: url(../../../static/image/like.png) no-repeat;
	background-size: cover;
}

.my-item-lc .my-item-lc-gz .icon-comment {
	background: url(../../../static/image/comment.png) no-repeat;
	background-size: cover;
}

.collect-box {
	position: absolute;
	right: 32rpx;
	bottom: 24rpx;
	width: 188rpx;
	height: 52rpx;
	line-height: 52rpx;
	background: #ffffff;
	border-radius: 40rpx;
	border: 2rpx solid #fc8f8f;
	color: #fc8f8f;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10rpx;
}

.collect-box .icon-WDSC {
	width: 32rpx;
	height: 32rpx;
	background: url(../../../static/image/detail-collect-active.png) no-repeat;
	background-size: cover;
}

.list-no-data {
	height: 100vh;
	padding-top: 308rpx;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.list-no-data .no-data-img {
	width: 423rpx;
	height: 266rpx;
	margin-bottom: 36rpx;
}

.list-no-data .no-data-txt {
	color: #333333;
	font-size: 24rpx;
	margin-bottom: 88rpx;
}

.list-no-data .no-data-btn {
	width: 360rpx;
	height: 78rpx;
	background: #fc8f8f;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
	font-size: 32rpx;
}
</style>
